<template>
  <el-drawer
    :visible.sync="defaultVisible"
    direction="rtl"
    size="100%"
    :before-close="handleClose"
    class="detail-drawer"
    ref="detailDrawer"
  >
    <el-descriptions
      title="任务详情"
      :column="2"
      size="default"
      class="task-content"
      border
    >
      <el-descriptions-item label="群发类型">
        {{ actionType[detail.type] ? actionType[detail.type].name : "--" }}
      </el-descriptions-item>
      <el-descriptions-item label="任务状态" v-if="source == 'create'">
        <span :class="`status-${detail.status}`">
          {{
            statusType[detail.status] ? statusType[detail.status].name : "--"
          }}
        </span>
      </el-descriptions-item>
      <el-descriptions-item label="群发名称">
        {{ detail.name }}
      </el-descriptions-item>
      <el-descriptions-item label="预计通知员工数">
        {{ detail.sum }}人
      </el-descriptions-item>
      <el-descriptions-item label="预计触达时间">
        <span v-if="detail.trigger_time">{{
          (detail.trigger_time * 1000) | dateFormatter("YYYY年MM月DD日 hh:mm")
        }}</span>
        <span v-else>--</span>
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions
      title="消息详情"
      :column="1"
      size="default"
      class="msg-content"
      border
    >
      <el-descriptions-item
        label="消息类型"
        v-if="detail.task && detail.task.class"
      >
        {{ classType[detail.task.class].name }}
      </el-descriptions-item>
      <el-descriptions-item label="标题" v-if="detail.type == 2">
        {{ detail.task.title }}
      </el-descriptions-item>
      <el-descriptions-item label="描述" v-if="detail.type == 2">
        {{ detail.task.description }}
      </el-descriptions-item>
      <el-descriptions-item label="链接" v-if="detail.type == 2">
        {{ detail.task.url }}
      </el-descriptions-item>
      <el-descriptions-item label="APPID" v-if="detail.type == 2">
        {{ detail.task.appid }}
      </el-descriptions-item>
      <el-descriptions-item label="页面路径" v-if="detail.type == 2">
        {{ detail.task.pagepath }}
      </el-descriptions-item>
      <el-descriptions-item label="消息内容"  v-if="detail.type == 1">
        {{ detail.send.content }}
      </el-descriptions-item>
      <el-descriptions-item
        label="消息附件"
        v-if="
          (detail.send && detail.send.new && detail.send.new.length > 0) ||
          (detail.task && detail.task.file && detail.task.file.length > 0)
        "
      >
        <div class="detail-file-list">
          <div
            class="detail-file-item"
            v-for="(file, index) of (detail.send && detail.send.new) ||
            (detail.task && detail.task.file) ||
            []"
            :key="index"
          >
            <a @click="handlePreview(file)" title="点击预览">
              {{ file.file_name || file.name }}
            </a>
          </div>
        </div>
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions
      title="数据详情"
      :column="1"
      size="default"
      class="data-content"
      :colon="false"
      v-if="source == 'create'"
    >
      <el-descriptions-item>
        <div class="search-content">
          <el-form :model="searchContent" ref="searchFrom" :inline="true">
            <el-form-item prop="send_id" label="经销商：">
              <el-select
                size="mini"
                v-model="searchContent.send_id"
                filterable
                clearable
              >
                <el-option
                  v-for="(item, index) of storeList"
                  :key="index"
                  :value="item.store_id"
                  :label="item.store_name"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item prop="is" label="是否发送：">
                              <el-select size="mini" v-model="searchContent.is">
                                  <el-option 
                                      v-for="(item, index) of sendStatus" 
                                      :key="index" 
                                      :value="item.id" 
                                      :label="item.name">
                                  </el-option>
                              </el-select>
                          </el-form-item> -->
            <el-form-item>
              <el-button type="primary" @click="handleSearch">搜索</el-button>
              <el-button type="primary" @click="handleReset">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="search-list">
          <el-table border :data="dataList">
            <el-table-column
              prop="store_name"
              label="经销商"
              min-width="160"
              align="center"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="num"
              label="通知人数"
              min-width="100"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="already_send_sum"
              label="实际发送人数"
              min-width="100"
              align="center"
              v-if="detail.type == 1"
            >
            </el-table-column>
            <el-table-column
              prop="already_send_percentage"
              label="完成率"
              min-width="100"
              align="center"
              :formatter="handlePercentage"
              v-if="detail.type == 1"
            >
            </el-table-column>
          </el-table>
        </div>
        <div class="bottom flex-item">
          <div class="btn-group">
            <!-- <el-button type="primary" @click="exportData">导出</el-button> -->
          </div>
          <div class="paginationOne">
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page="pageArr.curpage"
              :page-size="pageArr.pageSize"
              layout="total, prev, pager, next"
              :total="pageArr.total"
            >
            </el-pagination>
          </div>
        </div>
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions
      title="通知详情"
      :column="1"
      size="default"
      class="data-content"
      :colon="false"
      v-else-if="source == 'review'"
    >
      <el-descriptions-item>
        <div class="search-content">
          <el-form :model="searchContent" ref="searchFrom" :inline="true">
            <el-form-item prop="send_id" label="经销商：">
              <el-select
                size="mini"
                v-model="searchContent.send_id"
                filterable
                clearable
              >
                <el-option
                  v-for="(item, index) of storeList"
                  :key="index"
                  :value="item.store_id"
                  :label="item.store_name"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSearch">搜索</el-button>
              <el-button type="primary" @click="handleReset">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="search-list">
          <el-table border :data="dataList">
            <el-table-column
              label="经销商"
              min-width="160"
              align="center"
              prop="store_name"
            >
            </el-table-column>
            <el-table-column
              label="通知人数"
              min-width="100"
              align="center"
              prop="num"
            >
            </el-table-column>
          </el-table>
        </div>
        <div class="bottom flex-item">
          <div class="btn-group"></div>
          <div class="paginationOne">
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page="pageArr.curpage"
              :page-size="pageArr.pageSize"
              layout="total, prev, pager, next"
              :total="pageArr.total"
            >
            </el-pagination>
          </div>
        </div>
        <div
          class="btn-group"
          style="padding: 0 0 16px; margin-top: -10px"
          v-if="[1, 3].includes(+detail.status)"
        >
          <el-button type="primary" @click="handleSubmit(1)" size="small"
            >通过</el-button
          >
          <el-button @click="handleSubmit(2)" size="small">不通过</el-button>
        </div>
      </el-descriptions-item>
    </el-descriptions>
    <!-- 文件预览 -->
    <file-preview ref="filePreviewRef"></file-preview>

    <el-dialog
      title="安全验证"
      :visible.sync="codeVisible"
      width="30%"
      top="13%"
      :before-close="handleClose1"
      :append-to-body="true"
    >
      <span
        >当前操作属于高敏感权限,基于风险防控要求,请您输入公司领导王川手机号(133****1234)获取的验证码:</span
      >
      <div class="code_class">
        <el-input
          v-model="code"
          class="code_input"
          placeholder="请输入验证码"
        />
        <el-button
          type="primary"
          @click="getCode"
          :disabled="sendModel.countFlag"
          >{{
            sendModel.btnMsg == null
              ? sendModel.countNum + "s后重新发送"
              : sendModel.btnMsg
          }}</el-button
        >
      </div>
      <div class="code_btn">
        <el-button @click="handleClose1">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </div>
    </el-dialog>
  </el-drawer>
</template>
  <script>
import { actionType, statusType, classType } from "./action_types.js";
import { dateFormatter, objScreen } from "@/common/js/util.js";
import filePreview from "@/components/home/file-preview.vue";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Object,
      default: () => ({}),
    },
    source: String,
  },
  components: { filePreview },
  data() {
    return {
      defaultVisible: false,
      detail: {
        type: "", // 群发类型
        status: "", // 审核状态
        name: "--", // 群发名称
        sum: 0, // 预计通知员工数
        trigger_time: "", // 预计触达时间
        send: {
          content: "",
          new: [],
        },
        task: {
          class: "",
          content: "",
          attachment: [],
        },
      },
      actionType: actionType(true), // 群发类型
      statusType: statusType(true),
      classType: classType(true),
      searchContent: {
        send_id: "",
        is: "",
        is_search: false,
      },
      storeList: [], // 经销商列表
      sendStatus: [
        { name: "未发送", id: 0 },
        { name: "已发送", id: 1 },
      ],
      dataList: [], // 发送列表
      pageArr: {
        curpage: 1,
        pageSize: 500,
        total: 0,
      },
      codeVisible: false,
      code: "",
      sendModel: {
        countNum: 60,
        countFlag: false,
        intervalBtn: {},
        btnMsg: "获取验证码",
      },
    };
  },
  watch: {
    visible: {
      immediate: false,
      handler(val) {
        if (val) {
          this.getDetail(); // 获取详情
          this.handleReset(true);
        }
      },
    },
  },
  methods: {
    getCode() {
      this.sendModel.btnMsg = null;
      this.sendModel.countFlag = !this.sendModel.countFlag;
      this.sendModel.intervalBtn = setInterval(() => {
        if (this.sendModel.countNum <= 0) {
          this.sendModel.btnMsg = "获取验证码";
          clearInterval(this.sendModel.intervalBtn);
          this.sendModel.countFlag = !this.sendModel.countFlag;
          this.sendModel.countNum = 60;
        }
        this.sendModel.countNum--;
      }, 1000);
      var data = {
        id: this.data.id,
        send_time: new Date().getTime(),
      };
      this.$http.post("/admin/marketing/index.php?act=examine&op=sendMsg",data).then(res=>{
          if(res.code == 200){
              this.$message.success('已发送!');
          }else{
            this.$message.error(res.msg);
          }
      })
    },
    handleClose() {
      this.defaultVisible = false;
      this.$emit("update:visible", false);
    },
    handlePreview(file) {
      this.$refs.filePreviewRef.preview(file);
    },
    getDetail() {
      this.$http
        .get("/admin/marketing/index.php?act=message&op=info", {
          params: { id: this.data.id },
        })
            .then((res) => {
          if (res.code == 200) {
            this.detail = res.data;
            this.defaultVisible = true;
          } else {
            throw res.msg;
          }
        })
        .catch((error) => {
          error && this.$message.error(`${error}`);
        });
    },
    getStoreList() {
      this.$http
        .get("/admin/marketing/index.php?act=contact&op=blocDepartStoreList")
        .then((res) => {
          if (res.code == 200) {
            this.storeList = res.data || [];
          }
        })
        .catch((error) => {
          error && this.$message.error(`${error}`);
        });
    },
    getData() {
      let datas = {
        pageSize: this.pageArr.pageSize,
        page: this.pageArr.curpage,
        id: this.data.id,
      };
      if (this.searchContent.is_search) {
        datas = { ...datas, ...this.searchContent };
      }
      objScreen(datas);
      const url =
        this.source == "create"
          ? "/admin/marketing/index.php?act=message&op=detail"
          : "/admin/marketing/index.php?act=examine&op=detail";
      this.$http
        .post(url, datas)
        .then((res) => {
          if (res.code == 200) {
            this.dataList = res.data?.list || [];
          } else {
            this.dataList = [];
            this.detail.sum = 0;
            throw res.msg;
          }
          this.pageArr.total = this.dataList.length;
        })
        .catch((error) => {
          error && this.$message.error(`${error}`);
        });
    },
    handlePercentage(row, column, cellValue) {
      return cellValue + "%";
      return Math.round(cellValue * 10 ** 4) / 100 + "%"; // 保留2位小数
    },
    handleCurrentChange(page) {
      this.pageArr.curpage = page;
      this.getData();
    },
    handleSearch() {
      this.searchContent.is_search = true;
      this.pageArr.curpage = 1;
      this.getData();
    },
    handleReset(force = false) {
      this.$refs.searchFrom?.resetFields();
      if (force !== true && !this.searchContent.is_search) return;
      this.searchContent.is_search = false;
      this.pageArr.curpage = 1;
      this.getData();
    },
    exportData() {
      const origin = this.$store.state.location.origin;
      const datas = { id: this.data.id, ...this.searchContent };
      const params = [];
      Object.entries(datas).forEach((item) => {
        if (item[1] || item[1] === 0) {
          params.push(`${item[0]}=${item[1]}`);
        }
      });
      window.location.href =
        origin +
        "/admin/marketing/index.php?act=message&op=detail&export=1&" +
        params.join("&");
    },
    handleClose1() {
      this.codeVisible = false;
    },
    submit() {
      if (this.code == "") {
        this.$message.error("请输入验证码");
        return;
      } else {
        var data = {
          id: this.data.id,
          verify_time: new Date().getTime(),
          code: this.code.trim(),
        };
        this.$http
          .post("/admin/marketing/index.php?act=examine&op=verifyCode", data)
          .then((res) => {
            if (res.code == 200) {
                this.$message.success('验证成功!');
                this.handleClose1();
            } else {
              this.$message.error(res.msg);
            }
          });
      }
    },
    handleSubmit(status = 1) {
        let title = '确定通过审核？', url = "admin/marketing/index.php?act=examine&op=allow"
      if (status == 2) {
        title = "确定不通过审核？";
        url = "admin/marketing/index.php?act=examine&op=refuse";
       
      } 
      this.$confirm(title, "温馨提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$http
              .post(url, { id: this.data.id })
              .then((res) => {
                if (res.code == 200) {
                  this.$message.success("设置成功");
                  this.handleClose();
                  this.$emit("update");
                }else if(res.code == 101){
                    this.codeVisible = true;
                }
              })
              .catch((error) => {
                throw error;
              });
          })
          .catch(() => {
            error && this.$message.error(`${error}`);
          });
    },
  },
  created() {
    this.getStoreList(); // 发送列表
  },
};
</script>
  <style lang="scss" scoped>
.detail-drawer /deep/ {
  ::-webkit-scrollbar {
    width: 9px;
    height: 9px;
  }
  ::-webkit-scrollbar-thumb {
    cursor: pointer;
    background-color: rgba(144, 147, 153, 0.3);
    border-radius: 9px;
  }
  .el-drawer {
    width: 100%;
    max-width: 940px;
  }
  .el-drawer__header {
    margin-bottom: 0;
    z-index: 10;
  }
  .el-drawer__body {
    padding: 0 24px 0px;
    margin-top: -26px;
    display: flex;
    flex-direction: column;
  }
  .el-descriptions {
    font-size: 13px;
  }
  .el-descriptions__header {
    margin-bottom: 14px;
  }
  .el-descriptions__title {
    font-size: 15px;
  }
  .el-descriptions-item__label.is-bordered-label {
    padding: 8px 14px;
    width: 132px;
    text-align: left;
    color: #555;
  }
  .el-descriptions-item__cell.el-descriptions-item__content {
    padding: 8px 14px;
    color: #777;
  }
  .status-1 {
    color: #f56c6c;
  }
  .status-2 {
    color: #67c23a;
  }
  .status-3 {
    color: #e6a23c;
  }
  .task-content {
    margin-bottom: 13px;
  }
  .msg-content {
    margin-bottom: 14px;
    .el-descriptions-item__label {
      min-width: 32px;
    }
    .detail-file-list {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: -4px;
    }
    .detail-file-item a {
      margin: 0 6px 6px 0;
      padding: 2px 10px;
      display: block;
      border: 1px solid #409eff;
      background-color: #ecf5ff;
      color: #409eff;
      max-width: 160px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
      border-radius: 3px;
      cursor: pointer;
      font-size: 12px;
      &:hover {
        opacity: 0.8;
      }
    }
  }
  .data-content {
    flex-grow: 1;
    height: 0;
    display: flex;
    flex-direction: column;
    .el-descriptions__body {
      flex-grow: 1;
      height: 0;
    }
    .el-descriptions__table,
    .el-descriptions-item__container {
      height: 100%;
    }
    .el-descriptions-item__label {
      display: none;
    }
    .el-descriptions-item__content {
      width: 100%;
      display: flex;
      flex-direction: column;
    }
    .search-list {
      flex-grow: 1;
      height: 0;
      .el-table {
        height: 100% !important;
      }
    }
    .search-content {
      padding: 0;
      margin-bottom: 6px;
      .el-form-item {
        margin: 0px 0 10px 0;
        + .el-form-item .el-form-item__label {
          margin-left: 16px;
        }
        .el-button {
          margin-left: 12px;
          + .el-button {
            margin-left: 8px;
          }
        }
      }
    }
    .search-list {
      width: 100%;
      .el-table {
        height: 100%;
        .el-table__body-wrapper,
        .el-table__fixed-body-wrapper {
          height: calc(100% - 36px) !important;
          overflow-y: auto;
        }
      }
    }
  }
}
.code_class {
  display: flex;
  flex-direction: row;
  margin-top: 30px;
  margin-bottom: 50px;
  justify-content: space-between;
}
.code_input {
  width: 70%;
}
.code_btn {
  display: flex;
  justify-content: flex-end;
}
</style>